@responsive {
    @each $s, $space in ('m': 'margin', 'p': 'padding') {
        @each $size in (-16,-12,-10,-8,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,8,10,12,16,20,24,32,40,48,56,64) {
            @if($size >= 0 or $space=='margin') {
                .#{$s}-#{$size} {
                    #{$space}: #{$size/4}rem;
                }
                .#{$s}l-#{$size},.#{$s}x-#{$size} {
                    #{$space}-left: #{$size/4}rem;
                }
                .#{$s}r-#{$size},.#{$s}x-#{$size} {
                    #{$space}-right: #{$size/4}rem;
                }
                .#{$s}t-#{$size},.#{$s}y-#{$size} {
                    #{$space}-top: #{$size/4}rem;
                }
                .#{$s}b-#{$size},.#{$s}y-#{$size} {
                    #{$space}-bottom: #{$size/4}rem;
                }
            }
        }
    }

    .ml-auto, .mx-auto {
        margin-left: auto;
    }

    .mr-auto, .mx-auto {
        margin-right: auto;
    }
}
